<template>
  <div
    class="bg"
    :style="{
      filter: 'blur(' + props.blur + ')',
      backgroundImage: 'url(' + (bgPath ? bgPath : bgImage) + ')',
    }"
  ></div>
</template>

<script lang="ts" setup>
import { defineProps, ref } from "vue";
import bgImage from "@/assets/img/bg.jpg";
import bus from "vue3-eventbus";
import eventKey from "@/const/busEventConstKey";
import constStorageKey from "@/const/constStorageKey";
import nasFileService from "@/api-services/apis/nasFile";
import storage from "@/utils/storage";
const bgPath = ref(storage.getItem(constStorageKey.wallPapper));
const props = defineProps({
  blur: {
    type: String,
  },
});

bus.on(eventKey.changeWallpaper, (path) => {
  bgPath.value = nasFileService.FileLink(encodeURI(path));
  storage.setItem(constStorageKey.wallPapper, bgPath.value);
});
</script>

<style scoped lang="scss">
.bg {
  background-color: #000;
  position: fixed;
  object-fit: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
